import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { observer } from 'mobx-react';
import SettingStyle from '@/page/setting/setting.scss';
import MModal from "../../component/common/MModal";

import { delete_message, message_read, message_read_all } from '@/constants/ApiTypes';
import ApiHelper from '@/store/ApiHelper';

const mConfirm = MModal.confirm;

@observer class MessageList extends Component {
    static propTypes = {
        dataSource: PropTypes.array,
        refreshList: PropTypes.func.isRequired
    };
    constructor(props) {
        super(props);
    }
    state = {
        rowsState: [],
        rowsStyle: []
    };
    checkAll = e => {
        let { rowsState, rowsStyle } = this.state;
        rowsState = rowsState.map((val, index) => {
            return  true;
        });
        rowsStyle.forEach((val, index) => {
            rowsStyle[index] = SettingStyle['checkbox'] + " " + SettingStyle['checkbox-checked'];
        });
        this.setState({ rowsStyle });
        this.setState({ rowsState });
    };
    unCheckAll = () => {
        let { rowsState, rowsStyle } = this.state;
        rowsState = rowsState.map((val, index) => {
            return  false;
        });
        rowsStyle.forEach((val, index) => {
            rowsStyle[index] = SettingStyle['checkbox'];
        });
        this.setState({ rowsStyle });
        this.setState({ rowsState });
    };
    clickItem = index => {
        let { rowsState } = this.state;
        let { rowsStyle } = this.state;
        rowsState[index] = !rowsState[index];
        this.setState({ rowsState });
        if ( rowsState[index] == true ) {
            rowsStyle[index] = SettingStyle['checkbox'] + " " + SettingStyle['checkbox-checked'];
            this.setState({ rowsStyle });
        } else {
            rowsStyle[index] = SettingStyle['checkbox'];
            this.setState({ rowsStyle });
        }
    };
    componentWillReceiveProps = nextProps => {
        let rowsState = [];
        let rowsStyle = [];
        nextProps.dataSource.forEach((val, index) => {
            rowsState[index] = false;
            rowsStyle[index] = SettingStyle['checkbox'];
        });
        this.setState({
            rowsState, rowsStyle
        });
    };
    buildSelectIds = () => {
        const { rowsState } = this.state;
        let ids = [];
        this.props.dataSource.forEach((val, index) => {
            if (rowsState[index]) ids.push(val.id);
        });
        return ids.join(',');
    };
    deleteMessage = () => {
        const id = this.buildSelectIds();
        if (id == '') return MModal.success({ title: '操作提示', content: '未选中任何消息' });
        mConfirm({
            title: '是否删除选中消息？',
            titleStyle: { fontSize: 16 },
            width: 300,
            height: 177,
            content: '',
            okText: '是',
            cancelText: '否',
            okClassName: 'primary-btn-ok',
            cancelClassName: 'primary-btn-cancel',
            showTopClose: false,
            onOk: async () => {
                const data = {
                    msg_id: id
                };
                const result = await ApiHelper.requestPost(delete_message, data);
                if (result.status) {
                    MModal.success({ title: '操作成功', content: '操作成功', duration: 1.5 });
                    this.props.refreshList();
                } else {
                    MModal.success({ title: '操作失败', content: result.info });
                }
            },
            onCancel() {}
        });
    };
    markRead = () => {
        const id = this.buildSelectIds();
        if (id == '') return MModal.success({ title: '操作提示', content: '未选中任何消息' });
        mConfirm({
            title: '是否标记选中消息为已读？',
            titleStyle: { fontSize: 16 },
            width: 300,
            height: 177,
            content: '',
            okText: '是',
            cancelText: '否',
            okClassName: 'primary-btn-ok',
            cancelClassName: 'primary-btn-cancel',
            showTopClose: false,
            onOk: async () => {
                const data = {
                    msg_id: id
                };
                const result = await ApiHelper.requestPost(message_read, data);
                if (result.status) {
                    MModal.success({ title: '操作成功', content: '操作成功', duration: 1.5 });
                    this.props.refreshList();
                } else {
                    MModal.success({ title: '操作失败', content: result.info });
                }
            },
            onCancel() {}
        });
    };
    markAll = () => {
        mConfirm({
            title: '确定标为全部已读吗',
            titleStyle: { fontSize: 16 },
            width: 300,
            height: 177,
            content: '',
            okText: '是',
            cancelText: '否',
            okClassName: 'primary-btn-ok',
            cancelClassName: 'primary-btn-cancel',
            showTopClose: false,
            onOk: async () => {
                const result = await ApiHelper.requestPost(message_read_all);
                if (result.status) {
                    MModal.success({ title: '操作成功', content: '操作成功', duration: 1.5 });
                    this.props.refreshList();
                } else {
                    MModal.success({ title: '操作失败', content: result.info });
                }
            },
            onCancel() {}
        });
    };
    render() {
        const { dataSource } = this.props;
        const { rowsState, rowsStyle } = this.state;
        const liStyle = {
            width: '100%',
            height: 50,
            listStyleType: 'none',
            color: '#5b5b5b',
            fontSize: 12
        };
        const liStyleButton = {
            width: 100,
            height: 40,
            listStyleType: 'none',
            float: 'left',
            marginTop: 30,
            marginLeft: 16
        };
        const liSelectAll = {
            width: 70,
            height: 40,
            listStyleType: 'none',
            float: 'left',
            marginTop: 30,
            color: '#5b5b5b'
        };
        const items = dataSource.map((val, index) => {
            return <li key={ index } style={ liStyle }>
                <label className={SettingStyle['checkbox-wrapper']}>
                    <span className={rowsStyle[index]}>
                        <input id={ val.id } type="checkbox" readOnly checked={rowsState[index]} onClick={ () => this.clickItem( index )} className={SettingStyle['checkbox-input']} />
                        <span className={SettingStyle['checkbox-inner']} />
                    </span>
                    <span className={SettingStyle['msg-content']}>[{val.msg_status == 1 ? '已读' : '未读'}]{val.content}</span>
                </label>
            </li>
        });
        let selectAll = true;
        let selectedAllStyle = SettingStyle['checkbox'] + " " + SettingStyle['checkbox-checked'];
        rowsState.forEach(val => {
            if ( !val ) {
                selectAll = false;
                selectedAllStyle = SettingStyle['checkbox'];
            }
        });

        return (
            <div>
                <div className={SettingStyle['message-list']}>
                    {dataSource.length == 0 ?
                        <span className={SettingStyle['message-list-null']}>暂无任何消息</span> :
                        <ul>
                            { items }
                            <li style={ liSelectAll }>
                                <label className={SettingStyle['checkbox-wrapper']}>
                                    <span className={ selectedAllStyle }>
                                        <input type="checkbox" checked={ selectAll } readOnly onClick={ !selectAll ? this.checkAll : this.unCheckAll } className={SettingStyle['checkbox-input']} />
                                        <span className={SettingStyle['checkbox-inner']} />
                                    </span>
                                    <span className={SettingStyle['msg-content']}>全选</span>
                                </label>
                            </li>
                            <li style={ liStyleButton }><a className={SettingStyle['message-button']} onClick={ this.deleteMessage }>删除</a></li>
                            <li style={ liStyleButton }><a className={SettingStyle['message-button']} onClick={ this.markRead }>标记已读</a></li>
                            <li style={ liStyleButton }><a className={SettingStyle['message-button']} onClick={ this.markAll }>全部标记</a></li>
                        </ul>}
                </div>
                <div style={{ clear: 'both' }} />
            </div>
        );
    }
}
export default MessageList;